<template>
	<view class="mask-card-box">
		<!-- 任务状态信息开始 -->
		<maskStatus :info="detailinfo"></maskStatus>
		<!-- 任务状态信息结束 -->
		<!-- 任务内容显示区域开始 -->
		<view class="mask-content-box">
			<view class="mask-content-top">
				<assign :initiator="detailinfo.createUser.userName" :appointor="detailinfo.leaders[0].userName"></assign>
			</view>
			<view class="mask-cell-box">
				<view class="cell-item">
					<view class="cell-title">任务内容：</view>
					<rich-text class="cell-value" :nodes="detailinfo.taskDetails != '' ? detailinfo.taskDetails : '——'"></rich-text>
				</view>
				<view class="cell-item">
					<view class="cell-title">关键词：</view>
					<view class="cell-value">{{detailinfo.keyword != '' ? detailinfo.keyword : '——'}}</view>
				</view>
				<view class="cell-item">
					<view class="cell-title">参与人：</view>
					<view class="cell-value"><view class="tag" v-for="(item,index) in detailinfo.participant" :key="index">{{item.userName}}</view></view>
				</view>
				<view class="cell-item">
					<view class="cell-title">优先级：</view>
					<view class="cell-value larvel" :style="{'backgroundColor': numberColorList[detailinfo.priority]}">{{detailinfo.priority}}</view>
				</view>
				<view class="cell-item">
					<view class="cell-title">重要程度：</view>
					<view class="cell-value larvel" :style="{'backgroundColor': numberColorList[detailinfo.importance]}">{{detailinfo.importance}}</view>
				</view>
				<view class="cell-item">
					<view class="cell-title">隐私：</view>
					<view class="cell-value" style="color:#57af58;">{{detailinfo.isSelf == 1 ? '保密' : '公开'}}</view>
				</view>
				<view class="cell-item">
					<view class="cell-title">创建时间：</view>
					<view class="cell-value">{{detailinfo.createTime}}</view>
				</view>
				<view class="cell-item">
					<view class="cell-title">截止时间：</view>
					<view class="cell-value" style="color:#ed8019;">{{detailinfo.endTime}}</view>
				</view>
			</view>
		</view>
		<!-- 任务内容显示区域结束 -->
		<view class="parent-content-box">
			<view class="mask-cell-box">
				<view class="cell-item" v-if="detailinfo.ptaskName!= null">
					<view class="cell-title">父级任务：</view>
					<view class="cell-value">{{detailinfo.ptaskName}}</view>
				</view>
				<view class="cell-item">
					<view class="cell-title">流转方式：</view>
					<view class="cell-value">
						<view class="tag" v-if="detailinfo.disassemble && detailinfo.disassemble == 1">分解</view>
						<view class="tag" v-if="detailinfo.redeploy && detailinfo.redeploy == 1">转派</view>
					</view>
				</view>
				<view class="cell-item">
					<view class="cell-title">交付成果：</view>
					<view class="cell-value">{{detailinfo.workProducts == null ? '——' : detailinfo.workProducts}}</view>
				</view>
				<view class="cell-item">
					<view class="cell-title">评判标准：</view>
					<view class="cell-value">{{detailinfo.evaluation == null ? '——' : detailinfo.evaluation}}</view>
				</view>
				<view class="cell-item">
					<view class="cell-title">备注：</view>
					<view class="cell-value">{{detailinfo.remark == null ? '——' : detailinfo.remark}}</view>
				</view>
			</view>
		</view>
		<view class="button-box" v-if="isleader == true || iscreateuser == true">
			<view class="inline-box" v-if="detailinfo.executeStatus != 5 && detailinfo.executeStatus != 6">
				<view class="button decompose-button" v-if="detailinfo.disassemble && detailinfo.disassemble == 1" @click="splitTask">分解</view>
				<view class="button reassignment-button" v-if="detailinfo.redeploy && detailinfo.redeploy == 1 && isleader == true" @click="assignment">转派</view>
			</view>
			<view v-if="detailinfo.createUser.userId != detailinfo.leaders[0].userId && detailinfo.executeStatus == 0 && isleader == true" class="button begin-button" @click="openRemark('begin')">开始</view>
			<view class="inline-box" v-if="detailinfo.executeStatus == 0 || detailinfo.executeStatus == 1 || detailinfo.executeStatus == 2">
				<view class="button ing error" v-if="(detailinfo.createUser.userId == detailinfo.leaders[0].userId || iscreateuser == true) && (detailinfo.executeStatus == 0 || detailinfo.executeStatus == 1 || detailinfo.executeStatus == 2)" @click="openRemark('finish')">完结</view>
				<view v-if="detailinfo.createUser.userId ==detailinfo.leaders[0].userId && detailinfo.executeStatus == 0 && isleader == true" class="button begin-button ing" @click="openRemark('begin')">开始</view>
				<view class="button ing" v-if="detailinfo.executeStatus == 1 && isleader == true" @click="openRemark('suspend')">
					暂停
				</view>
				<view v-if="detailinfo.executeStatus == 2 && isleader == true" class="button begin-button ing" @click="openRemark('continue')">继续</view>
				<view class="button ing" v-if="(detailinfo.executeStatus == 1 || detailinfo.executeStatus == 2) && isleader == true" @click="openreport('finish')">
					完成提报
				</view>
				<view class="button ing error" v-if="(detailinfo.executeStatus == 1 || detailinfo.executeStatus == 2) && isleader == true" @click="openreport('error')">
					异常提报
				</view>
			</view>
			<view class="inline-box" v-if="detailinfo.executeStatus == 3 && iscreateuser == true">
				<view class="button ing error"  @click="openRemark('finish')">完结</view>
				<view class="button ing" @click="openRemark('return')">退回</view>
				<view class="button ing" @click="openRemark('score')">通过</view>
			</view>
		</view>
		<report :type="type" @inputChange="reportInputChange" @cancel="cancelreport" v-if="reportType == true" @confirm="taskForEnd"></report>
		<remark :title="remarktitle" @scoreChange="scoreChange" @inputChange="inputChange" @cancel="cancelRemark" :type="type" @confirm="remarkConfirm" :text="remarkText" v-if="remarkType == true"></remark>
	</view>
</template>

<script>
	import * as api from '@/utils/api.js';
	import {uploadImage} from '@/utils/utils.js';
	import maskStatus from '../card/maskStatus';
	import assign from '../assign/assign';
	import report from '../report/report';
	import remark from '../remark/remark';
	export default {
		components: {
			assign,report,remark,maskStatus
		},
		props:{
			isleader:{ // 是否负责人
				type:Boolean,
				default:false,
			},
			iscreateuser:{ // 是否创建人
				type:Boolean,
				default:false,
			},
			info:{ // 任务信息
				type:Object,
				default:{},
			},
		},
		data() {
			return {
				detailinfo:{}, // 任务信息存储（可修改）
				type:null, // 记录点击按钮类型状态
				remarktitle:'', // 备注信息标题文本
				scoreText:0,// 打分文本
				remarkText:'', // 备注信息文本
				reportText:'', // 提报信息文本
				reportType:false, // 提报悬浮窗显示状态
				remarkType:false, // 备注悬浮窗显示状态
				numberColorList:['','#d82b58','#f53d33','#fb950d','#f0b75d','#687178'], // 优先级和重要程度背景颜色列表
			}
		},
		mounted(){
			let that = this;
			let info = that.info;
				if (info.priority) {
					info.priority = info.priority.substring(0, 1);
				}else{
					info.priority = 3;
				}
				if (info.importance) {
					info.importance = info.importance.substring(0, 1);
				}else{
					info.importance = 3;
				}
				if(info.taskDetails != '' && info.taskDetails != null){
					info.taskDetails = info.taskDetails.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ');
				}
				that.detailinfo = info;
		},
		methods: {
			
			scoreChange:function(e){
				this.scoreText = e;
			},
			inputChange:function(e){
				this.remarkText = e;
			},
			reportInputChange:function(e){
				this.reportText = e;
			},
			/**
			 * 改变任务状态
			 */
			changeStatus:function(data){
				api.taskChangeStatus(data).then(res=>{
					this.$emit('refresh');
				})
			},
			/**
			 * 任务完结
			 */
			taskFinish:function(data){
				let that =this;
				api.taskFinish(data).then(res=>{
					that.$emit('refresh');
				})
			},
			/**
			 * 任务退回
			 */
			taskbackEnd:function(data){
				let that =this;
				api.backEnd(data).then(res=>{
					that.$emit('refresh');
				})
			},
			/**
			 * 任务结束
			 */
			taskend:function(data){
				let that =this;
				api.taskEnd(data).then(res=>{
					that.$emit('refresh');
				})
			},
			/**
			 * 转派触发事件
			 */
			assignment:function(){
				let that = this;
				uni.navigateTo({
					url: '/pages/initiate/personnel/personnel?selectedType=radio&taskid='+ that.info.id,
				});
			},
			/**
			 * 分解任务触发事件
			 */
			splitTask:function(){
				let that = this;
				uni.navigateTo({
					url: '/pages/initiate/split/split?id='+ that.info.id
				});
			},
			/**
			 * 备注信息提交触发事件
			 */
			remarkConfirm:function(e){
				let data = {id:this.info.id,remark:this.remarkText};
				if(e == 'begin'){
					data.status = 2;
				}else if(e == 'suspend'){
					data.status = 4;
				}else if(e == 'continue'){
					data.status = 3;
				}else if(e == 'finish'){
					this.taskFinish(data);
					return;
				}else if(e == 'return'){
					this.taskbackEnd(data);
					return;
				}else if(e == 'score'){
					data.score = this.scoreText;
					this.taskend(data);
				}
				this.changeStatus(data);
			},
			openRemark:function(e){
				this.type = e;
				let remarktitle = ''
				if(e == 'begin'){
					remarktitle = '输入备注信息'
				}else if(e == 'suspend'){
					remarktitle = '提报暂停'
				}else if(e == 'continue'){
					remarktitle = '提报继续'
				}else if(e == 'finish'){
					remarktitle = '提报完结'
				}else if(e == 'return'){
					remarktitle = '提报退回'
				}else if(e == 'score'){
					remarktitle = '提报通过';
				}
				this.remarktitle = remarktitle;
				this.remarkType = true;
			},
			cancelRemark:function(){
				this.remarkType = false;
			},
			/**
			 * 完成/异常提报
			 */
			async taskForEnd(params){
				let data = {id:this.info.id,remark:this.reportText,images:[]};
				if(params.imgList.length > 0){
					for(let i of params.imgList){
						let res = await uploadImage(i,'file-service/upload/public');
						res = JSON.parse(res);
						data.images.push({fileName:res.data.name,fileType:'1',fileUrl:res.data.url});
					}
				}
				if(params.type == 'finish'){
					data.status = 3;
				}
				if(params.type == 'error'){
					data.status = 4;
				}
				api.taskForEnd(data).then(res=>{
					this.$emit('refresh');
				})
			},
			openreport:function(e){
				this.type = e;
				this.reportType = true;
			},
			cancelreport:function(){
				this.reportType = false;
			},
			
		}
	}
</script>

<style lang="scss" scoped>
.mask-card-box {
		width: calc(100% - 50rpx);
		margin: 0 auto;
		margin-top: 20rpx;

		.mask-content-box {
			background-color: white;
			margin-top: 20rpx;
			border-radius: 10rpx;
			-moz-box-shadow:2px 2px 10px #7A7A7A; 
			-webkit-box-shadow:2px 2px 10 #7A7A7A; 
			box-shadow:2px 2px 10px #7A7A7A;
			overflow: hidden;
			.mask-content-top {
				width: calc(100% - 40rpx);
				margin: 0 20rpx;
				padding: 30rpx 0;
				border-bottom: 2rpx solid #e9e9e9;
			}

			
		}
		.mask-cell-box {
			width: calc(100% - 50rpx);
			margin: 0 auto;
		
			.cell-item {
				line-height: 60rpx;
				font-size: 28rpx;
				overflow: hidden;
				.cell-title {
					color: #666666;
					float: left;
				}
		
				.cell-value {
					float: right;
					// position: absolute;
					right: 0;
					top: 0;
					max-width: calc(100% - 200rpx);
					word-break:break-all;
				}
				.tag {
					display: inline-block;
					background-color: #adadad;
					border-radius: 10rpx;
					line-height:45rpx;
					margin-right:20rpx;
					padding: 0 10rpx;
					
				}
				.tag:last-child{
					margin-right: 0;
				}
				.larvel{
					color: white;
					background-color: #fa9414;
					width: 40rpx;
					height: 40rpx;
					text-align: center;
					line-height: 40rpx;
					border-radius: 10rpx;
					margin-top: 10rpx;
				}
				
			}
		}
		.parent-content-box{
			background-color: white;
			margin-top: 20rpx;
			border-radius: 10rpx;
			-moz-box-shadow:2px 2px 10px #7A7A7A; 
			-webkit-box-shadow:2px 2px 10 #7A7A7A; 
			box-shadow:2px 2px 10px #7A7A7A;
			overflow: hidden;
		}
		.button-box{
			.button{
				width: 100%;
				color:white;
				border-radius: 10rpx;
				line-height: 60rpx;
				font-size:24rpx;
				background-color:#2fc047;
				text-align: center;
				margin:10rpx 0;
				margin-right: 10rpx;
			}
			.button:last-child{
				margin-right: 0;
			}
			.inline-box{
				display: flex;
				justify-content: space-between;
				.button{
					width:100%;
					color:white;
					border-radius: 10rpx;
					line-height: 60rpx;
					font-size:24rpx;
					background-color:#2fc047;
					white-space: nowrap;
					text-align: center;
				}
				.ing{
					// width:calc(25% - 10rpx); 
				}
				.error{
					background-color: #fa3934;
				}
			}
		}
	}
</style>
